<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03计算属性和监听</title>
</head>
<body>
<div id="test">

    姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
    名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
    姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
    姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
    姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
    <p>{{fullName1}}</p>
    <p>{{fullName1}}</p>
    <p>{{fullName1}}</p>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#test',
        data: {
            firstName: 'hello',
            lastName: 'world',
            fullName2: 'hello world'
        },
        computed: {
            // 返回值得命名跟方法名相同
            // 什么时候会调这个方法：初始化时/ 引用的相关属性值发生变化
            fullName1() {
                console.log("fullName1()")// 这里只会打印一次 存在缓存
                return this.firstName + ' ' + this.lastName;
            },
            // 属性 可以实现双向
            fullName3: {
                // 回调函数：
                // 1.什么时候调用  2.用了做什么的
                // 1. 当需要读取当前属性值时回调
                get() {
                    return this.firstName + ' ' + this.lastName
                },
                // 当属性值发生改变时回调 更新相关的属性（监视当前属性的变化）
                set(value) { // value是fullName3的最新属性值
                    const names = value.split(' ')
                    this.firstName = names[0]
                    this.lastName = names[1]
                }
            }
        },
        watch: { // 配置监听
            firstName: function (newVal, oldVal) {
                // console.log(oldVal)
                this.fullName2 = newVal + +' ' + this.lastName;
            }
        }
    })
    // 使用vm的监听方法：https://cn.vuejs.org/v2/api/#vm-watch
    vm.$watch('lastName', function (value) {
        this.fullName2 = this.firstName + ' ' + value
    })
</script>
</body>
</html>